<template>
  <div class="wrapTable">
    <cp-page-table
      :total="total" 
      :page-size="pageSize"
      :current-page="currentPage"
      :fields="fields"
      :data="data"
      @size-change="sizeChange"
      @current-table-change="currentTableChange"
      @current-page-change="currentPageChange"
    ></cp-page-table>
  </div>
</template>
<script>
import cpPageTable from '@/components/cp-page-table/dist';
export default {
  name: 'wrapTable',
  components: {
    cpPageTable
  },
  data() {
    return {
      total: 100,
      currentPage: 1,
      pageSize: 10,
      data: [
        { name: '123', age: '12', sex: '男' },
        { name: '111', age: '12', sex: '女' },
        { name: '111', age: '12', sex: '男' },
        { name: '111', age: '12', sex: '女' },
        { name: '111', age: '12', sex: '男' },
        { name: '111', age: '12', sex: '女' },
        { name: '111', age: '12', sex: '男' },
        { name: '111', age: '12', sex: '女' },
        { name: '111', age: '12', sex: '男' },
        { name: '111', age: '12', sex: '女' }
      ],
      fields: [
        {
          label: '姓名',
          prop: 'name',
          'show-overflow-tooltip': true
        },
        {
          label: '年龄',
          prop: 'age'
        },
        {
          label: '性别',
          prop: 'sex'
        },
        {
          label: '操作',
          scopedSlots: {
            default: scope => (
              <div>
                <span on-click={() => this.look(scope.row)}>查看</span>
              </div>
            )
          }
        }
      ]
    };
  },
  methods: {
    sizeChange(num) {
      console.log(num);
    },
    currentTableChange(row) {
      console.log(row);
    },
    currentPageChange(page) {
      console.log(page);
      this.currentPage = page;
    },
    look(scope) {
      console.log(scope);
      this.currentPage = 1;
    }
  }
};
</script>
